<template>
  <div class="photo_wall_max">
    <el-upload
      multiple
      :limit="limit"
      v-bind="$attrs"
      :action="uploadUrl"
      :class="hideUpload ? 'photo_wall_upload_box' : ''"
      :accept="fileAccept"
      :list-type="fileType == 1 ? 'picture-card' : 'text'"
      :file-list="showFileList"
      :before-upload="beforeUpload"
      :on-exceed="handleOnExceed"
      :on-preview="handleOnPreview"
      :on-success="handleOnSuccess"
      :on-remove="handleOnRemove"
    >
      <i v-if="fileType == 1" class="el-icon-plus"></i>
      <el-button v-else size="small" type="primary"> 点击上传 </el-button>
      <div slot="tip" class="el-upload__tip">
        请上传{{ fileAccept.replace(/,/g, '/') }}文件，且不超过{{ maxSize }}Mb
      </div>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible" append-to-body>
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
  </div>
</template>

<script>
// 多文件上传组件
import config from './config'
export default {
  props: {
    // 父组件的 v-model 值
    value: {
      type: Array,
      default: () => []
    },
    // 文件大小限制
    maxSize: {
      type: Number,
      default: config.imgMaxSize
    },
    // 文件数量限制
    limit: {
      type: Number,
      default: config.imgLimit
    },
    // 上传的文件类型[1 图片][2 音频][3 视频][4 其他]
    fileType: {
      type: Number,
      default: 1
    },
    // 上传文件类型
    accept: {
      type: String,
      default: ''
    }
  },
  name: 'PhotoWall',
  data() {
    return {
      isHandle: false,
      hideUpload: false,
      showFileList: [],
      dialogImageUrl: '',
      dialogVisible: false,
      uploadUrl: config.uploadUrl,
      fileAccept: config.acceptType[this.fileType]
    }
  },
  watch: {
    value(val) {
      // 文件上传/删除时不改变 showFileList，只同步父级回显
      if (this.isHandle) {
        this.isHandle = false
        return
      }
      // 同步子组件文件显示
      this.showFileList = val.map((item, index) => {
        return {
          url: item,
          name: `${index + 1}_${item}`,
          uid: `uid_${index + 1}_${item}`
        }
      })
    }
  },
   mounted() {
    if (this.accept) {
      this.fileAccept = this.accept
    }
  },
  methods: {
    // 上传成功
    handleOnSuccess(res, file, fileList) {
      this.isHandle = true
      this.hideUpload = fileList.length >= this.limit
      // 由于回显的结构和上传结构不同所以在此判断一下再取值
      let imgUrlList = fileList.map((item) =>
        item.response ? item.response.data : item.url
      )
      this.$emit('input', imgUrlList) // 同步父组件的值 实现 v-model
      this.$emit('change', this.imgUrlList)
    },
    // 上传前限制
    beforeUpload(file) {
      const isSize = file.size / 1024 / 1024 < this.maxSize
      if (!isSize) {
        this.$message.error(`上传文件大小不能超过 ${this.maxSize}Mb!`)
      }
      return isSize
    },
    // 上传文件超过限制
    handleOnExceed(files, fileList) {
      this.$message.warning(`最多上传 ${this.limit} 个文件!`)
    },
    // 图片预览
    handleOnPreview(file) {
      if (this.fileType != 1) return
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    // 文件删除
    handleOnRemove(file, fileList) {
      this.isHandle = true
      let imgUrlList = fileList.map((item) =>
        item.response ? item.response.data : item.url
      )
      this.$emit('input', imgUrlList) // 同步父组件的值 实现 v-model
      this.$emit('change', this.imgUrlList)
    }
  }
}
</script>

<style lang="less" scoped>
.photo_wall_max {
  .photo_wall_upload_box /deep/ .el-upload {
    display: none;
  }
}
</style>
